import React from 'react';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import { Button, Card, Table, Modal, Space, Popconfirm, Divider, Checkbox, message } from 'antd';
import { PlusOutlined, SyncOutlined } from '@ant-design/icons';
import { connect } from 'umi';
import * as Request from '@/services/Request';
import WarehseEntry from './warehseEntry';
import WhseBinEntry from './whseBinEntry';
import IconFont from '@/components/Iconfont';

const apiURL = "/api/services/app/Warehse/";
const apiURL2 = "/api/services/app/WhseBin/";
class ViewPage extends React.Component<any, any> {
    constructor(props: any) {
        super(props);
        this.state = {
            loading: false,
            layout: 'Content',
            pageIndex: 1,
            pageIndex2: 1,
            pageSize: 10,
            totalCount: 0,
            totalCount2: 0,
            CurrWhse: { warehouseCode: 'WGJ' },
            dataSource: [],
        }
    }
    formRef: any = React.createRef();
    componentDidMount() {
        this.fetchDatas();
    }
    fetchDatas = () => {
        try {
            this.setState({ loading: true });
            const { pageSize, pageIndex } = this.state
            var skip = (pageIndex - 1) * pageSize;
            Request.get(apiURL + 'GetList?skipCount=' + skip + '&maxResultCount=' + pageSize).then((response: any) => {
                this.setState({
                    dataSource: response.result?.items,
                    totalCount: response.result?.totalCount,
                    CurrWhse: response.result?.items[0],
                    loading: false
                })
                this.switchModal(false)
            })
        } catch (error: any) { console.log(error) }
    }
    fetchDatas2 = () => {
        try {
            this.setState({ loading2: true });
            const { pageSize, pageIndex2, CurrWhse } = this.state
            var skip = (pageIndex2 - 1) * pageSize;
            Request.get(apiURL2 + 'GetList?skipCount=' + skip + '&maxResultCount=' + pageSize + '&whse=' + CurrWhse.warehouseCode).then((response: any) => {
                var items = response.result?.items
                var count = response.result?.totalCount
                this.setState({
                    dataSource2: items,
                    totalCount2: count,
                    loading2: false
                })
                this.switchModal2(false)
            })
        } catch (error: any) { console.log(error) }
    }
    switchModal = (visible: boolean, record: any = null) => {
        this.setState({ visible, record });
    }
    switchModal2 = (visible2: boolean, record2: any = null) => {
        this.setState({ visible2, record2 });
    }
    setWareHse = (record: any) => {
        let _this = this;
        this.setState({ CurrWhse: record }, function () {
            _this.fetchDatas2();
        });

    }
    handleDelete = (id: any, control: string = "Warehse") => {
        this.props.dispatch({
            type: "Abp/delete",
            payload: { id },
            control
        }).then(() => {
            if (control == "Warehse")
                this.fetchDatas();
            else
                this.fetchDatas2();
        });
    }
    render() {
        const { dataSource, dataSource2, loading, loading2, totalCount, pageSize, totalCount2, record, record2, CurrWhse } = this.state
        const columns = [
            {
                width: 30,
                render: () => <IconFont type="icon-package" />
            },
            {
                title: '仓库代码',
                dataIndex: 'warehouseCode',
                key: 'warehouseCode',
            },
            {
                title: '仓库描述',
                dataIndex: 'description',
                key: 'description',
            },
            {
                title: '仓库类型',
                dataIndex: 'warehouseType',
                key: 'warehouseType',
            },
            {
                title: '操作',
                render: (record: any) =>
                    <span>
                        <Popconfirm title="确定删除?" onConfirm={() => this.handleDelete(record.id)}>
                            <a>删除</a>
                        </Popconfirm>
                        <Divider type="vertical" />
                        <a onClick={() => this.switchModal(true, record)}>编辑</a>
                    </span>

            },
        ];
        const columns2 = [
            {
                width: 30,
                render: () => <IconFont type="icon-database" />
            },
            {
                title: '仓库代码',
                dataIndex: 'warehouseCode',
                key: 'warehouseCode',
            },
            {
                title: '库位名称',
                dataIndex: 'binNum',
                key: 'binNum',
            },
            {
                title: '库位描述',
                dataIndex: 'description',
                key: 'description',
            },
            {
                title: '不计算量',
                dataIndex: 'nonNettable',
                key: 'nonNettable',
                render: (text: boolean) => (
                    <Checkbox checked={text} />
                )
            },
            {
                title: '无效',
                dataIndex: 'inActive',
                key: 'inActive',
                render: (text: boolean) => (
                    <Checkbox checked={text} />
                )
            },
            {
                title: '操作',
                render: (record: any) =>
                    <span>
                        <Popconfirm title="确定删除?" onConfirm={() => this.handleDelete(record.id, "WhseBin")}>
                            <a>删除</a>
                        </Popconfirm>
                        <Divider type="vertical" />
                        <a onClick={() => this.switchModal2(true, record)}>编辑</a>
                    </span>

            },
        ];
        return (
            <PageHeaderWrapper>
                <Card title="仓库" extra={[
                    <Space>
                        <Button type="primary" onClick={() => this.switchModal(true)} icon={<PlusOutlined />}>添加</Button>
                        <Button type="ghost" onClick={() => this.fetchDatas()} icon={<SyncOutlined />}>刷新</Button>
                    </Space>]} >
                    <Table
                        rowKey="id"
                        size="small"
                        loading={loading}
                        columns={columns}
                        dataSource={dataSource}
                        onRow={record => {
                            return {
                                onClick: event => { this.setWareHse(record) },
                            };
                        }}
                        pagination={{
                            onChange: page => {
                                this.setState({ pageIndex: page }, () => {
                                    this.fetchDatas();
                                });
                            },
                            pageSize,
                            total: totalCount,
                        }} />
                </Card>
                <Card title={CurrWhse?.description + '位'} extra={[
                    <Space>
                        <Button type="primary" disabled={CurrWhse == null} onClick={() => this.switchModal2(true)} icon={<PlusOutlined />}>添加</Button>
                        <Button type="ghost" onClick={() => this.fetchDatas2()} icon={<SyncOutlined />}>刷新</Button>
                    </Space>]}>
                    <Table
                        rowKey="id"
                        size="small"
                        loading={loading2}
                        columns={columns2}
                        dataSource={dataSource2}
                        pagination={{
                            onChange: page => {
                                this.setState({ pageIndex: page }, () => {
                                    this.fetchDatas();
                                });
                            },
                            pageSize,
                            total: totalCount2,
                        }} />
                </Card>
                <Modal
                    title="仓库编辑"
                    visible={this.state.visible}
                    destroyOnClose={true}
                    onCancel={() => this.switchModal(false)}
                    footer={false}
                >
                    <WarehseEntry id={record?.id} fetchData={this.fetchDatas} />
                </Modal>
                <Modal
                    title="库位编辑"
                    visible={this.state.visible2}
                    destroyOnClose={true}
                    onCancel={() => this.switchModal2(false)}
                    footer={false}
                >
                    <WhseBinEntry id={record2?.id} fetchData={this.fetchDatas2} WareHse={CurrWhse} />
                </Modal>
            </PageHeaderWrapper>
        )
    }
}
export default connect(({ Abp }: API.IConnectState) => ({
    response: Abp.response,
    currentUser: Abp.currentUser,
}))(ViewPage);